<template>
    <!-- 歌曲列表 -->
    <div class="songlist">
        <div class="tlt">
            <h3>歌曲列表</h3>
            <span class="sub">{{ playlist.trackCount }}首歌</span>
        </div>
        <div class="song">
            <div class="header">
                <li class="w1"></li>
                <li class="w2">歌曲标题</li>
                <li class="w3">时长</li>
                <li class="w4">歌手</li>
                <li class="w5">专辑</li>
            </div>
            <div class="mainer">
                <ul v-for="(song, index) in songlist" :key="index">
                    <li class="m1 over underline" >
                        <span>{{ index + 1 }}</span>
                        <i class="play"  @click="setMusic(song.id)" :class="{active:song.id==musicNow.id}"></i>
                    </li>
                    <li class="m2 over underline" :title="song.name">
                        <router-link :to="{path:'/song',query:{id:`${song.id}`}}">
                            <span class="underline">{{ song.name }}</span>
                            <span v-if="song.alia" style="margin-left: 6px; color: #999" >-{{ song.alia }}</span>
                        </router-link>
                        <i class="mv"></i>
                    </li>
                    <li class="m3 over underline">
                        <span class="time">{{ min(song) }}:{{ sec(song) }}</span>
                        <div class="show">
                            <a title="添加到播放列表" class="a1"  @click="addMusicList(song.id)"></a>
                            <a title="收藏" class="a2" @click="collectSong(song.id)"></a>
                            <a title="下载" class="a4"></a>
                        </div>
                    </li>
                    <li class="m4 over underline">
                        <router-link :to="{path:'/artist/song',query:{id:song.ar.id}}" :title="song.ar.name">
                            <span :title="song.ar.name">{{ song.ar.name }}</span>
                        </router-link>

                    </li>
                    <li class="m5 over underline" :title="song.al.name">
                        <router-link :to="{path:'/album',query:{id:`${song.al.id}`}}">
                            <span>{{ song.al.name }}</span>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "songlist",
        data() {
            return {
                // 歌单信息
                playlist: {},
                // 歌曲信息
                songlist: [],
                // 歌曲详细详细
                songdetail: [],
                // 评论详情
                comList: [],
                // 分页器参数
                searchParams: {
                    total: 10000,
                    pageSize: 30,
                    pageNo: 1,
                },
                //评论
                text: "",
            };
        },
        computed:{
            id(){
                return this.$route.query.id;
            },
            isLogin() {
                return this.$store.state.login.isLogin;
            },
            musicNow(){
                return this.$store.state.music.music;
            },
            cookie(){
                return localStorage.getItem('COOKIE');
            }
        },
        watch:{
            id(){
                this.getPlayList();
            },
            isLogin() {
                return this.$store.state.login.isLogin;
            },
            cookie(){
                return localStorage.getItem('COOKIE');
            }
        },
        methods:{
            //收藏歌曲
            async collectSong(id){
                if (!this.isLogin){
                    this.$message('请登录，便可收藏歌曲！');
                    return ;
                }else {
                    let obj = await this.$API.iscollectSong(localStorage.getItem('USERID'),id);
                    //判断是否已经收藏
                    if (obj.result.isCollect){
                        this.$message('这个曲目已经被你收藏了，不可重复收藏！');
                        return ;
                    }else {
                        this.$API.reqCollectSong(1,localStorage.getItem('USERID'),id).then(res =>{
                            if (res.code==200){
                                this.$notify({
                                    type: "success",
                                    message: "收藏成功",
                                });
                            }
                        }).catch(error => this.$message.error("操作失败,请重试!"));

                    }
                }
            },
            // 获取歌单详情
            async getPlayList(){
                let obj = await this.$API.reqPlayListDetail(this.id);
                // console.log(result);
                this.songlist = [];
                this.songlist = obj.result.songlist;
                this.playlist = obj.result.playlist;
                this.playlist.nickname = obj.result.playlist.creator.nickname;
                this.playlist.avatarUrl = this.playlist.creator.avatarUrl;
            },
            // 添加音乐至播放列表
            addMusicList(ids){
                this.$store.dispatch('addMusicList',ids);
            },
            // 设置当前播放的音乐
            setMusic(id){
                this.$store.dispatch('setMusics',id);
                this.$store.dispatch('addMusicList',id);
                setTimeout(() => {
                    this.$bus.$emit('play');
                }, 500);
            },
            min(song){
                if(parseInt(song.dt/60000) < 10)
                    return '0'+parseInt(song.dt/60000);
                else return parseInt(song.dt/60000)
            },
            sec(song){
                let x = parseInt(song.dt/60000);
                let y = parseInt(song.dt/1000-x*60);
                if(y < 10) return '0'+y;
                else return y;
            },
        },
        mounted(){
            this.getPlayList();
        }
    }
</script>

<style lang='less' scoped>
    .songlist {
        width: 640px;
        min-height: 400px;
        .tlt {
            width: 100%;
            height: 35px;
            border-bottom: 2px solid #c20c0c;

            h3 {
                font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                font-size: 20px;
                line-height: 28px;
                font-weight: normal;
                color: #333;
                float: left;
            }

            .sub {
                margin: 9px 0 0 20px;
                float: left;
                color: #666;
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
                -webkit-text-size-adjust: none;
            }

            .more {
                margin-top: 5px;
                height: 16px;
                float: right;

                .fc {
                    color: #c20c0c;
                    font-weight: bold;
                }
            }
        }
        .song {
            width: 100%;
            border: 1px solid #d9d9d9;
            .header {
                width: 100%;
                height: 39px;
                display: flex;
                padding: 0;
                li {
                    border-right: 1px solid #d9d9d9;
                    padding: 8px 10px;
                    background-image: linear-gradient(
                            rgb(255, 255, 255),
                            rgb(240, 240, 240)
                    );
                    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
                }
                .w1 {
                    width: 74.5px;
                }
                .w2 {
                    width: 301.75px;
                }
                .w3 {
                    width: 111px;
                }
                .w4 {
                    width: 103.45px;
                }
                .w5 {
                    width: 149px;
                }
            }

            .mainer {
                width: 100%;
                display: block;
                ul:nth-of-type(odd) {
                    background: #f7f7f7;
                }
                .good {
                    height: 70px;
                    span,
                    a,
                    i {
                        display: block;
                        margin-top: 20px !important;
                    }
                }
                ul {
                    height: 30px;
                    width: 100%;
                    display: flex;

                    &:hover .time {
                        display: none !important;
                    }
                    &:hover .show {
                        display: block !important;
                    }

                    li {
                        padding: 6px 10px;
                    }

                    .m1 {
                        width: 74.5px;
                        // height: 100%;
                        padding: 6px 10px;
                        line-height: 18px;

                        span {
                            float: left;
                            width: 25px;
                            height: 18px;
                            color: #999;
                            text-align: center;
                        }
                        .play {
                            float: right;
                            display: block;
                            width: 17px;
                            height: 17px;
                            background: url("../../images/table.png") no-repeat -0px -103px;

                            &:hover {
                                background-position: -0px -128px;
                                cursor: pointer;
                            }
                            // background: url("../../images/table.png") no-repeat -20px -128px;
                        }
                        .active{
                            background-position: -20px -128px;
                            &:hover{
                                background-position: -20px -128px;
                            }
                        }
                    }


                    .m2 {
                        width: 301px;
                        a {
                            width: 280px;
                            color: #333;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            float: left;
                        }
                    }

                    .m3 {
                        width: 111px;
                        .time {
                            display: block;
                        }
                        .show {
                            width: 79px;
                            height: 18px;
                            display: none;
                            a {
                                margin: 2px 0 0 4px;
                                width: 18px;
                                height: 16px;
                                display: block;
                                float: left;
                                background: url("../../images/table.png") no-repeat;
                                &:hover {
                                    cursor: pointer;
                                }
                            }
                            .a1 {
                                width: 13px;
                                height: 13px;
                                margin-top: 2px;
                                margin-left: 0;
                                background: url("../../images/icon.png") no-repeat;
                                background-position: 0 -700px;

                                &:hover {
                                    background-position: -22px -700px;
                                }
                            }

                            .a2 {
                                background-position: 0 -174px;
                                &:hover {
                                    background-position: -20px -174px;
                                }
                            }
                            .a3 {
                                background-position: 0 -195px;
                                &:hover {
                                    background-position: -20px -195px;
                                }
                            }
                            .a4 {
                                background-position: -81px -174px;
                                &:hover {
                                    background-position: -104px -174px;
                                }
                            }
                        }
                    }

                    .m4 {
                        width: 103px;
                        color: #333;
                        & a:hover {
                            color: #666;
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    .m5 {
                        width: 149px;
                        color: #333;
                    }
                }
            }
        }
    }
</style>